<template>
    <div class="goods">
        <van-dropdown-menu>
            <van-dropdown-item disabled title="全部"/>
            <van-dropdown-item
                v-model="value1"
                :options="option1"
                title="价格"
                @change="changePrice"
            />
            <van-dropdown-item
                v-model="value2"
                :options="filterCategory"
                title="分类"
                @change="changeKind"
            />
        </van-dropdown-menu>
        <!-- 如有没有搜索到商品显示 empty-->
        <van-empty
            v-if="goodsList.length == 0"
            class="custom-image"
            image="search"
            description="抱歉,没有搜索到商品"
        />
        <ul>
            <li v-for="item in goodsList" :key="item.id" @click="gotoDetail(item)">
                <img :src="item.list_pic_url" alt="">
                <p>{{item.name}}</p>
                <span>{{item.retail_price | formatMoney}}</span>
            </li>
       </ul>
    </div>
</template>

<script>
export default {
    name: "",
    props: ["filterCategory","goodsList"],
    data() {
        return {
            value1: 'desc', // 由高到低
            // value2: 0,  // 默认值
            option1: [
                { text: '价格由高到低', value: 'desc' },
                { text: '价格由低到高', value: 'asc' },
            ],
            // option2: [
            //     { text: '默认排序', value: 'a' },
            //     { text: '好评排序', value: 'b' },
            //     { text: '销量排序', value: 'c' },
            // ],
        };
    },

    components: {},

    computed: {
        value2:{
            get(){
                // 通过this.filterCategory 这个数组中的哪一项是checked,那么该项对应的id就是value的值
                let id = 0;
                this.filterCategory.forEach((item )=> {
                    if(item.checked){
                        id = item.value;
                    }
                });
                // console.log(id);
                return id;
            },
            set(val){}
        }
    },

    created() {},

    methods: {
        changePrice(val){
            // 切换价格排序
            // console.log(val);
            // 通过子传父的方式 将val 传给search组件,然后search组件拿到数据后,进行重新的请求渲染
            this.$emit('transfer',val);
        },
        changeKind(val){
            // 切换分类
            console.log(val);
            this.$emit('transfer1',val);
        },
        gotoDetail(item){
            console.log(item);
            this.$router.push({'path':'/productDetail',query:{id:item.id}});
        }
    },
};
</script>
<style lang="less" scoped>
.goods{
    ul{
        display: flex;
        flex-wrap: wrap;
        li{
            text-align: center;
            width: 50%;
            padding: 3px;
            box-sizing: border-box;
            img{
                width: 100%;
                display: block;
            }
            p{
                font-size: 16px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            span{
                font-size: 16px;
                color: #8b0000;
            }
        }
    }
}
</style>